<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Gnatoo</title>

<link href="style.css" rel="stylesheet" type="text/css" />
	
<link href="jslibraries/jquery/css/smoothness/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css" />

<link href="css/examples/tables/bluetablesorter/style.css"
	rel="stylesheet" type="text/css" />
<link href="css/examples/tabs/simple.css" rel="stylesheet" type="text/css" />
<link href="css/examples/trees/simple.css"
	rel="stylesheet" type="text/css" />

<script type="text/javascript" src="jslibraries/jquery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery.layout.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery.simplemodal-1.4.1.js"></script>

<script type="text/javascript" src="gnatoo/gnatoo.js"></script>

<script type="text/javascript" src="jslibraries/data/BaseListDataProvider.js"></script>
<script type="text/javascript" src="jslibraries/data/TreeDataProvider.js"></script>

</head>

<body>
<form>

<script type="text/javascript">
var portfolio = {
		id: 'portfolio',
		parts : [ {
			id : 'nasdaq stocks',
			papers : [ 
				{ id: 'ABC', lastprice: 45.00, units : 400, actions : [ 
					{ date : '12/01/2010', amount : 120, actiontype : 'sell'},
					{ date : '12/02/2010', amount : 120, actiontype : 'buy'},
					{ date : '13/02/2010', amount : 120, actiontype : 'buy'},
					{ date : '14/02/2010', amount : 120, actiontype : 'buy'},
				] },
				{ id: 'TWITTER', lastprice: 32.00, units : 200, actions : [ 
					{ date : '12/01/2010', amount : 120, actiontype : 'sell'},
					{ date : '13/01/2010', amount : 220, actiontype : 'buy'},
					{ date : '12/01/2010', amount : 120, actiontype : 'sell'},
					{ date : '21/02/2010', amount : 620, actiontype : 'buy'},
					{ date : '22/02/2010', amount : 320, actiontype : 'buy'},
				] },
				{ id: 'RTE', lastprice: 450.00, units : 100, actions : [ 
					{ date : '12/01/2010', amount : 120, actiontype : 'sell'},
					{ date : '12/02/2010', amount : 120, actiontype : 'buy'},
				] }
			],
			total : 1000.45,
			desc :'nasdaq stocks'
		} , {
			id : 'american stocks',
			papers : [ 
				{ id: 'APPLE', lastprice: 345.00, units : 2000, actions : [ 
					{ date : '12/01/2010', amount : 120, actiontype : 'sell'},
					{ date : '12/02/2010', amount : 120, actiontype : 'buy'},
				] },
				{ id: 'GOOGLE', lastprice: 605.00, units : 250, actions : [ 
					{ date : '12/01/2010', amount : 120, actiontype : 'sell'},
					{ date : '12/02/2010', amount : 120, actiontype : 'buy'},
				] },
				{ id: 'IBM', lastprice: 145.00, units : 700, actions : [ 
					{ date : '12/01/2010', amount : 120, actiontype : 'sell'},
					{ date : '12/02/2010', amount : 120, actiontype : 'buy'},
				] }
			],
			total : 2000.45,
			desc :'american stocks'
		} ],
		
		remark : 'vip customer'
	};

// very compact but define tree structure
var customTree = new TreeDataProvider();
customTree.treeProvider =  {
		getChildren : function(object) {
			if (object.parts != null) {
				return object.parts;
			}
			if (object.papers != null) {
				return object.papers;
			}
			if (object.actions != null) {
				return object.actions;
			}
			return null;
		},
		canHaveChildren : function(object) {
			return this.getChildren(object) != null;
		}
};
customTree.setData(portfolio);

</script>

<!-- simple, pure HTML/CSS markup and you got nice tree. -->
<div id="Customtree" >
<script type="text/html">
  <ul class="treeview">
	<!-- the recursion start point -->
	<tree value="#{.customTree.rootNode}" var="node">
		<li title="#{.node.getType()}" class="#{.node.getType()}" 
			onclick="#{.customTree.toggleNodeExpand(.node)}">
			
			<span rendered="#{.node.data.id != null}" style="font-weight: bold">
				#{.node.data.id}
			</span>

			<span rendered="#{.node.data.id == null}" >
				#{'date:' + .node.data.date +' amount:'+ .node.data.amount}
			</span>

			<!-- here comes the recursion -->
			<ul rendered="#{.node.expanded == true}">
				<loop value="#{.node.getChildren()}" var="child">
					<tree value="#{.child}" />		
				</loop>
			</ul>

		</li>	
	</tree>
  </ul>
</script>
</div>
<script>
$(document).ready( function() { 
	// init context
	var gnatooContext = window.gnatoo.initByName('Customtree'); 
	// bind model
	gnatooContext.data['customTree'] = customTree;
	// render
	gnatooContext.render();
});
</script>


<!-- <jsp:include page="tutorials/Tables/Treetable/Treetable.html"
	flush="false"></jsp:include>
 -->

</form>
<pre id="mylog" style="font-size: 1.0em; display : block"></pre>
</body>
</html>


